{% extends 'mpa/common/base.html' %}

{% block content %}
        <div class="wrapper">
            <div class="container">

                <!-- Page-Title -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="btn-group pull-right">
                            <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings <span class="m-l-5"><i class="fa fa-cog"></i></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <h4 class="page-title"> Pricing Table</h4>
                    </div>
                </div>


                <div class="row pricing-plan">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-sm-6 col-md-6 col-lg-3">
                                <div class="price_card text-center">
                                    <div class="pricing-header bg-primary">
                                        <span class="price">$19</span>
                                        <span class="name">Starter Pack</span>
                                    </div>
                                    <ul class="price-features">
                                        <li>5 Projects</li>
                                        <li>1 GB Storage</li>
                                        <li>No Domain</li>
                                        <li>1 User</li>
                                        <li>24x7 Support</li>
                                    </ul>
                                    <button class="btn btn-primary waves-effect waves-light w-md">Sign Up</button>
                                </div> <!-- end Pricing_card -->
                            </div> <!-- end col -->

                            <div class="col-sm-6 col-md-6 col-lg-3">
                                <div class="price_card text-center">
                                    <div class="pricing-header bg-pink">
                                        <span class="price">$29</span>
                                        <span class="name">Professional Pack</span>
                                    </div>
                                    <ul class="price-features">
                                        <li>15 Projects</li>
                                        <li>5 GB Storage</li>
                                        <li>2 Domain</li>
                                        <li>10 User</li>
                                        <li>24x7 Support</li>
                                    </ul>
                                    <button class="btn btn-pink w-md waves-effect waves-light">Sign Up</button>
                                </div>
                            </div> <!-- end col -->

                            <div class="col-sm-6 col-md-6 col-lg-3">
                                <div class="price_card text-center">
                                    <div class="pricing-header bg-purple">
                                        <span class="price">$39</span>
                                        <span class="name">Enterprise Pack</span>
                                    </div>
                                    <ul class="price-features">
                                        <li>Unlimited Projects</li>
                                        <li>10 GB Storage</li>
                                        <li>10 Domain</li>
                                        <li>100 User</li>
                                        <li>24x7 Support</li>
                                    </ul>
                                    <button class="btn btn-purple w-md waves-effect waves-light">Sign Up</button>
                                </div> <!-- end Pricing_card -->
                            </div> <!-- end col -->

                            <div class="col-sm-6 col-md-6 col-lg-3">
                                <div class="price_card text-center">
                                    <div class="pricing-header bg-success">
                                        <span class="price">$49</span>
                                        <span class="name">Unlimited Pack</span>
                                    </div>
                                    <ul class="price-features">
                                        <li>Unlimited Projects</li>
                                        <li>100 GB Storage</li>
                                        <li>50 Domain</li>
                                        <li>Unlimited User</li>
                                        <li>24x7 Support</li>
                                    </ul>
                                    <button class="btn btn-success w-md waves-effect waves-light">Sign Up</button>
                                </div> <!-- end Pricing_card -->
                            </div> <!-- end col -->

                        </div> <!-- end row -->
                    </div> <!-- end Col-10 -->
                </div> <!-- end row -->


                <div class="row">
                    <!-- Pricing Item -->
                    <div class="col-sm-6 col-md-6 col-lg-3">
                        <div class="pricing-item">
                            <div class="pricing-item-inner">
                                <div class="pricing-wrap">
                                    <!-- Icon (Simple-line-icons) -->
                                    <div class="pricing-icon">
                                        <i class="ion-plane"></i>
                                    </div>
                                    <!-- Pricing Title -->
                                    <div class="pricing-title">
                                        Starter Pack
                                    </div>
                                    <!-- Pricing Features -->
                                    <div class="pricing-features">
                                        <ul class="sf-list pr-list">
                                            <li>5 Projects</li>
                                            <li>1 GB Storage</li>
                                            <li>No Domain</li>
                                            <li>1 User</li>
                                            <li>Free Support</li>
                                        </ul>
                                    </div>
                                    <div class="pricing-num">
                                        <sup>$</sup>99
                                    </div>
                                    <div class="pr-per">
                                        per month
                                    </div>
                                    <!-- Button -->
                                    <div class="pr-button">
                                        <button class="btn btn-success w-md waves-effect waves-light">Sign Up</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Pricing Item -->

                    <!-- Pricing Item -->
                    <div class="col-sm-6 col-md-6 col-lg-3">
                        <div class="pricing-item">
                            <div class="pricing-item-inner">
                                <div class="pricing-wrap">
                                    <!-- Icon (Simple-line-icons) -->
                                    <div class="pricing-icon">
                                        <i class="ion-trophy"></i>
                                    </div>
                                    <!-- Pricing Title -->
                                    <div class="pricing-title">
                                        Professional Pack
                                    </div>
                                    <!-- Pricing Features -->
                                    <div class="pricing-features">
                                        <ul class="sf-list pr-list">
                                            <li>5 Projects</li>
                                            <li>1 GB Storage</li>
                                            <li>No Domain</li>
                                            <li>1 User</li>
                                            <li>Free Support</li>
                                        </ul>
                                    </div>
                                    <div class="pricing-num">
                                        <sup>$</sup>199
                                    </div>
                                    <div class="pr-per">
                                        per month
                                    </div>
                                    <!-- Button -->
                                    <div class="pr-button">
                                        <button class="btn btn-purple w-md waves-effect waves-light">Sign Up</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Pricing Item -->

                    <!-- Pricing Item -->
                    <div class="col-sm-6 col-md-6 col-lg-3">
                        <div class="pricing-item">
                            <div class="pricing-item-inner">
                                <div class="pricing-wrap">
                                    <!-- Icon (Simple-line-icons) -->
                                    <div class="pricing-icon">
                                        <i class="ion-umbrella"></i>
                                    </div>
                                    <!-- Pricing Title -->
                                    <div class="pricing-title">
                                        Enterprise Pack
                                    </div>
                                    <!-- Pricing Features -->
                                    <div class="pricing-features">
                                        <ul class="sf-list pr-list">
                                            <li>5 Projects</li>
                                            <li>1 GB Storage</li>
                                            <li>No Domain</li>
                                            <li>1 User</li>
                                            <li>Free Support</li>
                                        </ul>
                                    </div>
                                    <div class="pricing-num">
                                        <sup>$</sup>299
                                    </div>
                                    <div class="pr-per">
                                        per month
                                    </div>
                                    <!-- Button -->
                                    <div class="pr-button">
                                        <button class="btn btn-pink w-md waves-effect waves-light">Sign Up</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Pricing Item -->

                    <!-- Pricing Item -->
                    <div class="col-sm-6 col-md-6 col-lg-3">
                        <div class="pricing-item">
                            <div class="pricing-item-inner">
                                <div class="pricing-wrap">
                                    <!-- Icon (Simple-line-icons) -->
                                    <div class="pricing-icon">
                                        <i class="ion-paper-airplane"></i>
                                    </div>
                                    <!-- Pricing Title -->
                                    <div class="pricing-title">
                                        Unlimited Pack
                                    </div>
                                    <!-- Pricing Features -->
                                    <div class="pricing-features">
                                        <ul class="sf-list pr-list">
                                            <li>5 Projects</li>
                                            <li>1 GB Storage</li>
                                            <li>No Domain</li>
                                            <li>1 User</li>
                                            <li>Free Support</li>
                                        </ul>
                                    </div>
                                    <div class="pricing-num">
                                        <sup>$</sup>399
                                    </div>
                                    <div class="pr-per">
                                        per month
                                    </div>
                                    <!-- Button -->
                                    <div class="pr-button">
                                        <button class="btn btn-warning w-md waves-effect">Sign Up</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Pricing Item -->

                </div>
            </div>
            <!-- end container -->
        </div>
        <!-- end wrapper -->
{% endblock %}